<template>
  <div class="nav">
    <div class="nav-in banxin">
      <ul class="tanxin">
        <li><a href="#" @click="$router.push('/Navc/home')">推荐</a></li>
        <li><a href="#" @click="$router.push('/Navc/Rank')">排行榜</a></li>
        <li><a href="#" @click="$router.push('/Navc/Playlist')">歌单</a></li>
        <li><a href="#" @click="$router.push('/Navc/Station')">主播电台</a></li>
        <li><a href="#" @click="$router.push('/Navc/Singer')">歌手</a></li>
        <li><a href="#" @click="$router.push('/Navc/NewDish')">新碟上架</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets//base.less";
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.nav {
  z-index: 90;
  height: 35px;
  box-sizing: border-box;
  background-color: #c20c0c;
  border-bottom: 1px solid #a40011;
  .nav-in {
    ul {
      margin: 0 auto;
      width: 550px;
      transform: translateX(-55px);
      li {
        width: 84px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        a {
          height: 34px;
          color: #fff;
          font-size: 12px;
        }
      }
    }
  }
}
</style>